<template>
  <div class="tablec">
    <div class="tablec-header">
      <div class="title1">{{ title }}
        <span class="title1-label">电量:</span><el-select style="width: 100px;margin-right: 8px;" v-model="typeObj.powerUnit" size="small" placeholder="请选择" @change="handlePowerUnitChange">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <span class="title1-label">电价:</span><el-select style="width: 100px;margin-right: 8px;" v-model="typeObj.priceUnit" size="small" placeholder="请选择" @change="handlePriceUnitChange">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <span class="title1-label">电费:</span><el-select style="width: 100px;margin-right: 8px;" v-model="typeObj.costUnit" size="small" placeholder="请选择" @change="handleCostUnitChange">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <Select v-model="checkList">
        <template slot="left">
          <el-upload v-if="canEdit" :before-upload="beforeUpload" :on-success="handleSuccess"
            :action="dataType === '天' ? 'http://43.143.173.157:8881/powerTradingData/import' : 'http://43.143.173.157:8881/dailySummary/import'"
            accept=".xlsx, .xls" :show-file-list="false" style="display: inline-block;margin-right: 8px;">
            <el-button size="small" type="primary">导入</el-button>
          </el-upload>
          <el-button size="small" type="primary" @click="showBig = true">预览</el-button>
          <el-button v-if="canEdit" size="small" type="primary" @click="dialogVisible = true">新增</el-button>
          <el-button size="small" type="primary" @click="exportData">导出</el-button>
        </template>
      </Select>
    </div>
    <el-table :row-class-name="rowClass" :data="tableData" style="width: 100%;background: #04065f;" :border="false"
      @cell-dblclick="onDbClick" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave">
      <el-table-column label-class-name="column1 column10" align="center" label="项目名称">
        <el-table-column prop="time" label="指标名称" label-class-name="column1" class-name="column1" align="center"
          width="120">
          <el-table-column prop="time" label="时间" label-class-name="column1" class-name="column1" align="center"
            width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column>

      <!-- 中长期 -->
      <template v-for="k in checked" v-if="checkList.includes('中长期')">
        <el-table-column label-class-name="column2 column10" align="center" :label="k">
          <el-table-column label-class-name="column2 column10" align="center" label="中长期">
            <el-table-column label-class-name="column2" class-name="columnAll" align="center"
              :prop="getKey(k, 'midLongTermPower')" label="电量" parent="中长期" />
            <el-table-column label-class-name="column2" class-name="column3" align="center"
              :prop="getKey(k, 'midLongTermPrice')" label="电价" />
            <el-table-column label-class-name="column2" class-name="column3" align="center"
              :prop="getKey(k, 'midLongTermCost')" label="电费" />
          </el-table-column>
        </el-table-column>
      </template>

      <!-- 日前 -->
      <template v-for="k in checked" v-if="checkList.includes('日前')">
        <el-table-column label-class-name="column4 column10" align="center" :label="k">
          <el-table-column label-class-name="column4 column10" align="center" label="日前">
            <el-table-column label-class-name="column4" class-name="columnAll" align="center"
              :prop="getKey(k, 'dayAheadClearedPower')" label="出清电量" />
            <el-table-column label-class-name="column4" class-name="column3" align="center"
              :prop="getKey(k, 'dayAheadDeviationPower')" label="偏差电量" />
            <el-table-column label-class-name="column4" class-name="columnAll" align="center"
              :prop="getKey(k, 'dayAheadClearedPrice')" label="出清电价" />
            <el-table-column label-class-name="column4" class-name="columnAll" align="center"
              :prop="getKey(k, 'dayAheadCost')" label="电费" />
          </el-table-column>
        </el-table-column>
      </template>

      <!-- 实时 -->
      <template v-for="k in checked" v-if="checkList.includes('实时')">
        <el-table-column label-class-name="column6 column10" align="center" :label="k">
          <el-table-column label-class-name="column6 column10" class-name="columnAll" align="center" label="实时">
            <el-table-column label-class-name="column6" class-name="columnAll" align="center"
              :prop="getKey(k, 'realTimeClearedPower')" label="出清电量" />
            <el-table-column label-class-name="column6" class-name="column3" align="center"
              :prop="getKey(k, 'realTimeDeviationPower')" label="偏差电量" />
            <el-table-column label-class-name="column6" class-name="columnAll" align="center"
              :prop="getKey(k, 'realTimeClearedPrice')" label="出清电价" />
            <el-table-column label-class-name="column6" class-name="columnAll" align="center"
              :prop="getKey(k, 'realTimeCost')" label="电费" />
          </el-table-column>
        </el-table-column>
      </template>

      <!-- 抄表 -->
      <template v-for="k in checked" v-if="checkList.includes('抄表')">
        <el-table-column label-class-name="column8 column10" align="center" :label="k">
          <el-table-column v-if="checkList.includes('抄表')" label-class-name="column8 column10" align="center"
            label="抄表">
            <el-table-column label-class-name="column8" class-name="columnAll" align="center"
              :prop="getKey(k, 'meterReadingPower')" label="电量" />
            <el-table-column label-class-name="column8" class-name="columnAll" align="center"
              :prop="getKey(k, 'meterReadingAvgPrice')" label="电价" />
            <el-table-column label-class-name="column8" class-name="column3" align="center"
              :prop="getKey(k, 'meterReadingCost')" label="电费" />
          </el-table-column>
        </el-table-column>
      </template>

      <!-- 结算 -->
      <template v-for="k in checked" v-if="checkList.includes('结算')">
        <el-table-column label-class-name="column6 column10" align="center" :label="k">
          <el-table-column v-if="checkList.includes('结算')" label-class-name="column6 column10" align="center"
            label="结算">
            <el-table-column label-class-name="column6" class-name="columnAll" align="center"
              :prop="getKey(k, 'settlementPower')" label="电量" />
            <el-table-column label-class-name="column6" class-name="columnAll" align="center"
              :prop="getKey(k, 'settlementAvgPrice')" label="电价" />
            <el-table-column label-class-name="column6" class-name="column3" align="center"
              :prop="getKey(k, 'settlementCost')" label="电费" />
          </el-table-column>
        </el-table-column>
      </template>

      <!-- <el-table-column
            label-class-name="columnUser"
            class-name="columnUser"
            align="center"
            fixed="right"
            prop="midLongTermPrice"
            label="操作"
            v-show="checked.length === 1"
          >
            <template slot-scope="scope">
              <el-button @click="editClick(scope.row)" type="text" size="small"
                >编辑</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-popconfirm
                :title="`确定删除 ${scope.row.time} 吗？`"
                @confirm="deleteClick(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  style="color: red"
                  size="small"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column> -->
    </el-table>
    <!-- 全屏 -->
    <el-dialog title="预览" :modal-append-to-body="false" :visible.sync="showBig" custom-class="userdialog" fullscreen>
      <el-table :row-class-name="rowClass" :data="tableData" style="width: 100%;background: #04065f;" :border="false"
        @cell-dblclick="onDbClick" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave">
        <el-table-column label-class-name="column1 column10" align="center" label="项目名称">
          <el-table-column prop="time" label="指标名称" label-class-name="column1" class-name="column1" align="center"
            width="120">
            <el-table-column prop="time" label="时间" label-class-name="column1" class-name="column1" align="center"
              width="120">
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!-- 中长期 -->
        <template v-for="k in checked" v-if="checkList.includes('中长期')">
          <el-table-column label-class-name="column2 column10" align="center" :label="k">
            <el-table-column label-class-name="column2 column10" align="center" label="中长期">
              <el-table-column label-class-name="column2" class-name="columnAll" align="center"
                :prop="getKey(k, 'midLongTermPower')" label="电量" parent="中长期" />
              <el-table-column label-class-name="column2" class-name="column3" align="center"
                :prop="getKey(k, 'midLongTermPrice')" label="电价" />
              <el-table-column label-class-name="column2" class-name="column3" align="center"
                :prop="getKey(k, 'midLongTermCost')" label="电费" />
            </el-table-column>
          </el-table-column>
        </template>

        <!-- 日前 -->
        <template v-for="k in checked" v-if="checkList.includes('日前')">
          <el-table-column label-class-name="column4 column10" align="center" :label="k">
            <el-table-column label-class-name="column4 column10" align="center" label="日前">
              <el-table-column label-class-name="column4" class-name="columnAll" align="center"
                :prop="getKey(k, 'dayAheadClearedPower')" label="出清电量" />
              <el-table-column label-class-name="column4" class-name="column3" align="center"
                :prop="getKey(k, 'dayAheadDeviationPower')" label="偏差电量" />
              <el-table-column label-class-name="column4" class-name="columnAll" align="center"
                :prop="getKey(k, 'dayAheadClearedPrice')" label="出清电价" />
              <el-table-column label-class-name="column4" class-name="columnAll" align="center"
                :prop="getKey(k, 'dayAheadCost')" label="电费" />
            </el-table-column>
          </el-table-column>
        </template>

        <!-- 实时 -->
        <template v-for="k in checked" v-if="checkList.includes('实时')">
          <el-table-column label-class-name="column6 column10" align="center" :label="k">
            <el-table-column label-class-name="column6 column10" class-name="columnAll" align="center" label="实时">
              <el-table-column label-class-name="column6" class-name="columnAll" align="center"
                :prop="getKey(k, 'realTimeClearedPower')" label="出清电量" />
              <el-table-column label-class-name="column6" class-name="column3" align="center"
                :prop="getKey(k, 'realTimeDeviationPower')" label="偏差电量" />
              <el-table-column label-class-name="column6" class-name="columnAll" align="center"
                :prop="getKey(k, 'realTimeClearedPrice')" label="出清电价" />
              <el-table-column label-class-name="column6" class-name="columnAll" align="center"
                :prop="getKey(k, 'realTimeCost')" label="电费" />
            </el-table-column>
          </el-table-column>
        </template>

        <!-- 抄表 -->
        <template v-for="k in checked" v-if="checkList.includes('抄表')">
          <el-table-column label-class-name="column8 column10" align="center" :label="k">
            <el-table-column v-if="checkList.includes('抄表')" label-class-name="column8 column10" align="center"
              label="抄表">
              <el-table-column label-class-name="column8" class-name="columnAll" align="center"
                :prop="getKey(k, 'meterReadingPower')" label="电量" />
              <el-table-column label-class-name="column8" class-name="columnAll" align="center"
                :prop="getKey(k, 'meterReadingAvgPrice')" label="电价" />
              <el-table-column label-class-name="column8" class-name="column3" align="center"
                :prop="getKey(k, 'meterReadingCost')" label="电费" />
            </el-table-column>
          </el-table-column>
        </template>

        <!-- 结算 -->
        <template v-for="k in checked" v-if="checkList.includes('结算')">
          <el-table-column label-class-name="column6 column10" align="center" :label="k">
            <el-table-column v-if="checkList.includes('结算')" label-class-name="column6 column10" align="center"
              label="结算">
              <el-table-column label-class-name="column6" class-name="columnAll" align="center"
                :prop="getKey(k, 'settlementPower')" label="电量" />
              <el-table-column label-class-name="column6" class-name="columnAll" align="center"
                :prop="getKey(k, 'settlementAvgPrice')" label="电价" />
              <el-table-column label-class-name="column6" class-name="column3" align="center"
                :prop="getKey(k, 'settlementCost')" label="电费" />
            </el-table-column>
          </el-table-column>
        </template>
      </el-table>
    </el-dialog>
    <!-- 单个编辑 -->
    <el-dialog title="编辑" :modal-append-to-body="false" :visible.sync="visible" custom-class="userdialog" width="500px">
      <span>{{ oneLabel }}：</span><el-input-number v-model="oneValue" placeholder="请输入"></el-input-number>
      <span slot="footer" class="dialog-footer">
        <el-button @click="
          visible = false;
        oneRow = {};
        ">取 消</el-button>
        <el-button type="primary" @click="onOkOne" :loading="dialogLoading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增和编辑 -->
    <el-dialog :title="rowData.id ? '编辑' : '新增'" :modal-append-to-body="false" :visible.sync="dialogVisible"
      custom-class="userdialog" width="1000px">
      <div>
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item class="fitem" label="项目名称" prop="projectId">
            <el-select v-model="ruleForm.projectId" placeholder="请选择项目名称">
              <el-option v-for="item in checkListArr" :key="item.projectId" :label="item.projectName"
                :value="item.projectId"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="dataType === '天'" class="fitem" label="小时" prop="hour">
            <el-time-select v-model="ruleForm.hour" :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '23:00'
            }" placeholder="选择时间">
            </el-time-select>
          </el-form-item>

          <el-form-item class="fitem" label="日期" prop="recordDate">
            <el-date-picker v-model="ruleForm.recordDate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <!-- 中长期 -->
          <el-divider><span class="dividerletter">中长期</span></el-divider>
          <el-form-item class="fitem" label="电量" prop="midLongTermPower">
            <el-input-number v-model="ruleForm.midLongTermPower" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电价" prop="midLongTermPrice">
            <el-input-number v-model="ruleForm.midLongTermPrice" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电费" prop="midLongTermCost">
            <el-input-number v-model="ruleForm.midLongTermCost" placeholder="请输入"></el-input-number>
          </el-form-item>

          <!-- 日前 -->
          <el-divider><span class="dividerletter">日前</span></el-divider>
          <el-form-item class="fitem" label="出清电量" prop="dayAheadClearedPower">
            <el-input-number v-model="ruleForm.dayAheadClearedPower" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="偏差电量" prop="dayAheadDeviationPower">
            <el-input-number v-model="ruleForm.dayAheadDeviationPower" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="出清电价" prop="dayAheadClearedPrice">
            <el-input-number v-model="ruleForm.dayAheadClearedPrice" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电费" prop="dayAheadCost">
            <el-input-number v-model="ruleForm.dayAheadCost" placeholder="请输入"></el-input-number>
          </el-form-item>

          <!-- 实时 -->
          <el-divider><span class="dividerletter">实时</span></el-divider>
          <el-form-item class="fitem" label="出清电量" prop="realTimeClearedPower">
            <el-input-number v-model="ruleForm.realTimeClearedPower" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="偏差电量" prop="realTimeDeviationPower">
            <el-input-number v-model="ruleForm.realTimeDeviationPower" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="出清电价" prop="realTimeClearedPrice">
            <el-input-number v-model="ruleForm.realTimeClearedPrice" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电费" prop="realTimeCost">
            <el-input-number v-model="ruleForm.realTimeCost" placeholder="请输入"></el-input-number>
          </el-form-item>

          
          <!-- 抄表 -->
          <el-divider><span class="dividerletter">抄表</span></el-divider>
          <el-form-item class="fitem" label="电量" prop="meterReadingPower">
            <el-input-number v-model="ruleForm.meterReadingPower" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电价" prop="meterReadingAvgPrice">
            <el-input-number v-model="ruleForm.meterReadingAvgPrice" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电费" prop="meterReadingCost">
            <el-input-number v-model="ruleForm.meterReadingCost" placeholder="请输入"></el-input-number>
          </el-form-item>

          <!-- 结算 -->
          <el-divider><span class="dividerletter">结算</span></el-divider>
          <el-form-item class="fitem" label="电量" prop="settlementPower">
            <el-input-number v-model="ruleForm.settlementPower" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电价" prop="settlementAvgPrice">
            <el-input-number v-model="ruleForm.settlementAvgPrice" placeholder="请输入"></el-input-number>
          </el-form-item>
          <el-form-item class="fitem" label="电费" prop="settlementCost">
            <el-input-number v-model="ruleForm.settlementCost" placeholder="请输入"></el-input-number>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="
          dialogVisible = false;
        rowData = {};
        ">取 消</el-button>
        <el-button type="primary" @click="onOk" :loading="dialogLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import Select from "./Select.vue";
import { insertApi, updateApi, deleteApi, insertDayApi, updateDayApi, deleteDayApi, importApi, importDayApi } from "@/api/table";
import { baseUrl } from "@/api/api";

function toFixed(val, fix = 3) {
  return val ? Number(val) : val;
}

const initruleForm = {
  projectId: null,
  recordDate: "",
  // midLongTermPower: null,
  // midLongTermPrice: null,
  // midLongTermCost: null,
  // dayAheadClearedPower: null,
  // dayAheadDeviationPower: null,
  // dayAheadClearedPrice: null,
  // dayAheadCost: null,
  // realTimeClearedPower: null,
  // realTimeDeviationPower: null,
  // realTimeClearedPrice: null,
  // realTimeCost: null,
  // settlementPower: null,
  // settlementAvgPrice: null,
  // settlementCost: null,
};

export default {
  components: {
    Select,
  },
  props: {
    title: {
      type: String,
      default: "表格",
    },
    data: {
      type: Array,
      default: () => [],
    },
    checked: {
      type: Array,
      default: () => [],
    },
    checkListArr: {
      type: Array,
      default: () => [],
    },
    params: {
      type: Object,
      default: () => ({}),
    },
    dataAll: {
      type: Array,
      default: () => [],
    },
    dataType: {
      type: String,
      default: "日期",
    },
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
    typeObj: {
      handler(val) {
        this.getList();
      },
      deep: true,
    },
    checkList(val) {
      console.log(val, "checkList------");
    },
  },
  data() {
    return {
      checkList: ["中长期", "日前", "实时", "抄表", "结算"],
      tableData: [],
      ruleForm: { ...initruleForm },
      dialogVisible: false,
      dialogLoading: false,
      rowData: {},
      rules: {
        projectId: [{ required: true, message: "请选择项目名称", trigger: "blur" }],
        recordDate: [{ required: true, message: "请选择日期", trigger: "blur" }],
        hour: [{ required: true, message: "请选择小时", trigger: "blur" }],
        midLongTermPower: [{ required: true, message: "请输入电量", trigger: "blur" }],
        midLongTermPrice: [{ required: true, message: "请输入电价", trigger: "blur" }],
        midLongTermCost: [{ required: true, message: "请输入电费", trigger: "blur" }],
        dayAheadClearedPower: [{ required: true, message: "请输入出清电量", trigger: "blur" }],
        dayAheadDeviationPower: [{ required: true, message: "请输入偏差电量", trigger: "blur" }],
        dayAheadClearedPrice: [{ required: true, message: "请输入出清电价", trigger: "blur" }],
        dayAheadCost: [{ required: true, message: "请输入电费", trigger: "blur" }],
        realTimeClearedPower: [{ required: true, message: "请输入出清电量", trigger: "blur" }],
        realTimeDeviationPower: [{ required: true, message: "请输入偏差电量", trigger: "blur" }],
        realTimeClearedPrice: [{ required: true, message: "请输入出清电价", trigger: "blur" }],
        realTimeCost: [{ required: true, message: "请输入电费", trigger: "blur" }],
        meterReadingPower: [{ required: true, message: "请输入电量", trigger: "blur" }],
        meterReadingAvgPrice: [{ required: true, message: "请输入电价", trigger: "blur" }],
        meterReadingCost: [{ required: true, message: "请输入电费", trigger: "blur" }],
        settlementPower: [{ required: true, message: "请输入电量", trigger: "blur" }],
        settlementAvgPrice: [{ required: true, message: "请输入电价", trigger: "blur" }],
        settlementCost: [{ required: true, message: "请输入电费", trigger: "blur" }],
      },
      visible: false,
      oneRow: {},
      oneValue: '',
      oneLabel: '',
      oneKey: '',
      showBig: false,
      typeObj: {
        powerUnit: '兆瓦时',
        priceUnit: '元/兆瓦时',
        costUnit: '元',
      },
      options1: [
        {
          value: '兆瓦时',
          label: '兆瓦时'
        },
        {
          value: '千瓦时',
          label: '千瓦时'
        },
      ],
      options2: [
        {
          value: '元/兆瓦时',
          label: '元/兆瓦时'
        },
        {
          value: '万/千瓦时',
          label: '万/千瓦时'
        },
      ],
      options3: [
        {
          value: '元',
          label: '元'
        },
        {
          value: '万',
          label: '万'
        },
      ],
      userInfo: {},
      canEdit: false,
    };
  },
  created() {
    const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {roleName: []}
    this.userInfo = userInfo
    this.canEdit = userInfo.roleName.includes('交易人员') || userInfo.roleName.includes('管理员')
    this.init(this.data);
  },
  computed: {
    isTop() {
      return this.$store.state.setting.isTop;
    },
  },
  methods: {
    async beforeUpload(file) {
      // const res = await importDayApi({ file })
      // console.log(res,'res');
    },
    async handleSuccess(response, file, fileList) {
      console.log(response, file, fileList, '22222222222');
      if (response === 'success') {
        this.$message({
          message: `导入成功!`,
          type: "success",
        });
        this.getList()
      } else {
        this.$message({
          message: `导入失败!`,
          type: "error",
        });
      }
    },
    // async handleError(err, file, fileList) {
    //   console.log(err, file, fileList,'1111111111');
    // },
    onDbClick(row, column, cell, event) {
      if (!this.canEdit) {
        return
      }
      const ll = column.property.split('-')
      const name = ll[0]
      const kk = ll[1]
      const obj = this.dataAll.find(item => item.projectName === name)
      const one = obj.list.find(item => (item.summaryDate === row.time || (item.hour && item.hour.toString() + ":00") === row.time))
      console.log(one, 'one----------');
      if (!one) {
        this.$message({
          message: `本条数据无法编辑!`,
          type: "warning",
        });
        return
      }
      console.log(row, column, cell, event, 'row, column, cell, event');
      this.visible = true
      this.oneValue = one[kk]
      this.oneLabel = column.label
      this.oneRow = one
      this.oneKey = kk
    },
    handlePowerUnitChange(val) {
      if (val === "兆瓦时") {
        this.typeObj.priceUnit = "元/兆瓦时"
        this.typeObj.costUnit = "元"
      } else {
        this.typeObj.priceUnit = "万/千瓦时"
        this.typeObj.costUnit = "万"
      }
    },
    handlePriceUnitChange(val) {
      if (val === "元/兆瓦时") {
        this.typeObj.powerUnit = "兆瓦时"
        this.typeObj.costUnit = "元"
      } else {
        this.typeObj.powerUnit = "千瓦时"
        this.typeObj.costUnit = "万"
      }
    },
    handleCostUnitChange(val) {
      if (val === "元") {
        this.typeObj.powerUnit = "兆瓦时"
        this.typeObj.priceUnit = "元/兆瓦时"
      } else {
        this.typeObj.powerUnit = "千瓦时"
        this.typeObj.priceUnit = "万/千瓦时"
      }
    },
    getList() {
      this.$emit('init')
    },
    editClick(row) {
      const obj = this.dataAll.find(item => item.projectName === this.checked[0])
      const one = obj.list.find(item => (item.summaryDate === row.time || (item.hour.toString() + ":00") === row.time))
      // return
      this.rowData = one;
      console.log(row);
      this.ruleForm = {
        ...one,
        recordDate: one.recordDate ? moment(one.recordDate) : one.summaryDate ? moment(one.summaryDate) : moment()
      };
      this.dialogVisible = true;
    },
    async deleteClick(row) {
      const obj = this.dataAll.find(item => item.projectName === this.checked[0])
      const one = obj.list.find(item => (item.summaryDate === row.time || (item.hour.toString() + ":00") === row.time))
      console.log(one, 'one---------------');
      let res = null
      if (this.dataType === '天') {
        res = await deleteApi(one.dataId);
      } else {
        res = await deleteDayApi(one.dataId);
      }
      this.getList()
      console.log(res, "row删除");
      this.$message({
        message: `删除成功!`,
        type: "success",
      });
      this.getList();
    },
    async onOkOne() {
      console.log(this.checkListArr, 'checkListArr');
      console.log(this.ruleForm);
      const params = {
        ...this.oneRow,
        [this.oneKey]: this.oneValue
      };
      console.log(this.oneKey, params, 'params-----');
      // return
      let res = {};
      if (this.dataType === '天') {
        res = await updateApi({ ...params });
      } else {
        res = await updateDayApi({ ...params });
      }
      this.dialogLoading = false;
      if (res.dataId) {
        this.$message({
          message: `编辑成功!`,
          type: "success",
        });
        this.getList();
        this.visible = false;
        this.oneRow = {};
      } else {
        this.$message({
          message: `编辑失败!`,
          type: "error",
        });
      }

    },
    onOk() {
      console.log(this.checkListArr, 'checkListArr');
      console.log(this.ruleForm);

      this.$refs.ruleForm.validate(async (valid) => {

        if (valid) {
          // this.dialogLoading = true;
          const params = {
            ...this.ruleForm,
            projectName: this.checkListArr.find(item => item.projectId === this.ruleForm.projectId).projectName,
            recordDate: moment(this.ruleForm.recordDate).format('YYYY-MM-DD'),
            summaryDate: moment(this.ruleForm.recordDate).format('YYYY-MM-DD'),
          };
          console.log(params, 'params-----');
          // return
          let res = {};
          if (this.dataType === '天') {
            if (this.rowData.dataId) {
              res = await updateApi({ dataId: this.rowData.dataId, ...params });
            } else {
              res = await insertApi(params);
            }
          } else {
            if (this.rowData.dataId) {
              res = await updateDayApi({ dataId: this.rowData.dataId, ...params });
            } else {
              res = await insertDayApi(params);
            }
          }
          this.getList()
          this.dialogLoading = false;
          if (res.projectId) {
            this.$message({
              message: `${this.rowData.dataId ? "编辑" : "新增"}成功!`,
              type: "success",
            });
            this.getList();
            this.dialogVisible = false;
            this.rowData = {};
            this.ruleForm = { ...initruleForm };
          } else {
            this.$message({
              message: `${this.rowData.dataId ? "编辑" : "新增"}失败!`,
              type: "error",
            });
          }

          // console.log(res,'res-----');
          // if (res.loginFlag) {
          //     router.push('/home')
          // }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async exportData() {
      console.log(this.dataType, this.params, "导出-----");
      const params = {...this.params};
      if (!params) {
        return;
      }
      let str = "";
      if (this.dataType === "天") {
        params.recordDate = `${params.recordDate},${params.endRecordDate}`
        delete params.endRecordDate
      }
      const kkArr = Object.keys(params)
      kkArr.forEach((kk, i) => {
        str += kk;
        if (i === (kkArr.length - 1)) {
          str += "=" + params[kk];
        }else {
          str += "=" + params[kk] + "&";
        }
        
      });
      console.log(str, "str----------");
      if (this.dataType === "天") {
        this.openAndCloseWindow(`${baseUrl}/powerTradingData/export?${str}`);
      } else if (this.dataType === "日期") {
        //  const res = await dailySummaryExport(params)
        this.openAndCloseWindow(`${baseUrl}/dailySummary/export?${str}`);
      }
    },
    openAndCloseWindow(val) {
      // 打开新窗口
      let newWindow = window.open(val.replace(/&+$/, ""), "_blank");

      // 3秒后关闭窗口
      setTimeout(() => {
        if (newWindow && !newWindow.closed) {
          newWindow.close();
          newWindow = null;
          console.log("窗口已关闭");
        }
      }, 10000);
    },
    getKey(val1, val2) {
      return val1 + '-' + val2
    },
    init(val) {
      // val.forEach((item) => {
      //   item.time =
      //     item.summaryDate ||
      //     ((item.hour || item.hour === 0) && item.hour.toString() + ":00");
      //   // 中长期
      //   item.midLongTermPower = toFixed(item.midLongTermPower, 3);
      //   item.midLongTermPrice = toFixed(item.midLongTermPrice, 0);
      //   item.midLongTermCost = toFixed(item.midLongTermCost, 3);

      //   // 日前
      //   item.dayAheadClearedPower = toFixed(item.dayAheadClearedPower, 3);
      //   item.dayAheadDeviationPower = toFixed(item.dayAheadDeviationPower, 3);
      //   item.dayAheadClearedPrice = toFixed(item.dayAheadClearedPrice, 2);
      //   item.dayAheadCost = toFixed(item.dayAheadCost, 4);

      //   // 实时
      //   item.realTimeClearedPower = toFixed(item.realTimeClearedPower, 3);
      //   item.realTimeDeviationPower = toFixed(item.realTimeClearedPower, 2);
      //   item.realTimeClearedPrice = toFixed(item.realTimeClearedPrice, 2);
      //   item.realTimeCost = toFixed(item.realTimeCost, 4);

      //   // 结算
      //   item.settlementPower = toFixed(item.realTimeCost, 3);
      //   item.settlementAvgPrice = toFixed(item.settlementAvgPrice, 6);
      //   item.settlementCost = toFixed(item.settlementCost, 7);
      // });
      this.tableData = val;
    },
    rowClass({ row }) {
      // if (row.time === "合计") {
      //   return "column11";
      // } else {
        return 'column100'
      // }
    },
    handleMouseEnter(row, column, cell, event) {
      // 鼠标进入时的操作
      cell.style.cursor = 'pointer';
      cell.style.backgroundColor = '#063088';
      cell.style.color = '#FFFFFF';
    },
    handleMouseLeave(row, column, cell, event) {
      // 鼠标离开时的操作
      cell.style.cursor = '';
      cell.style.backgroundColor = '';
      cell.style.color = '';
    },
  },
};
</script>

<style lang="scss" scope>
.columnAll {
  background: #080f57;
  color: #FFFFFF;
}

.column1 {
  background: #212768 !important;
  color: #FFFFFF !important;
}

.column2 {
  background: #063088 !important;
  color: #FFFFFF !important;
}

.column3 {
  background: #0f2168;
  color: #FFFFFF;
}

.column4 {
  background: #1e478a !important;
  color: #FFFFFF !important;
}

.column5 {
  background: #f8fdff;
}

.column6 {
  background: #063088 !important;
  color: #FFFFFF !important;
}

.column7 {
  background: #f7fdfa;
}

.column8 {
  background: #1e478a !important;
  color: #FFFFFF !important;
}

.column9 {
  background: #fdfaff;
}

.column10 {
  font-weight: 600;
  color: black;
}

.el-table__row:hover>.el-table__cell {
  font-weight: 600;
  color: black;
}

// .el-table__cell:hover {
//   font-weight: 600;
//   color: black !important;
// }
.column11 {
  td {
    font-weight: 600;
    // color: black;
    color: #FFFFFF !important;
    background: #fffaee !important;
  }
}

.tablec {
  .tablec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;

    .title1 {
      font-size: 24px;
      font-weight: 600;
      min-width: 100px;
      .title1-label{
        font-size: 18px;
        line-height: 24px;
        margin-right: 4px;
      }
    }
  }

  // .el-table {
  //   .el-table__cell {
  //     padding: 0;
  //   }

  //   .cell {
  //     font-size: 12px;
  //     line-height: 18px;
  //   }
  // }
}
</style>


<style lang="scss">
.userdialog {
  .el-table {
    .el-table__cell {
      padding: 0;
    }

    .cell {
      font-size: 16px;
      line-height: 32px;
    }
  }
}
.dividerletter{
  color: #027ef9;
  font-weight: 600;
}
</style>
